<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view v-for="(item,index) in data.list" :key="index">
					<navigator class="cat-item flex flex-row " :class="[data.cat_id==item.id?'active':'']" openType="redirect" url="'/store/shop/shop?store_id='+store_id+'&tab=2&sort=0&cat_id='+item.id">
						<view class="flex-grow-1">{{item.name}}</view>
						<view class="flex-grow-0">
							<image class="pointer" src="../../static/store/icon-jiantou-you.png"></image>
						</view>
					</navigator>
					<view class="sub-cat-list" v-if="item.list">
						<navigator class="sub-cat-item " :class="[data.cat_id==item.id?'active':'']" openType="redirect" :url="'/store/shop/shop?store_id='+store_id+'&tab=2&sort=0&cat_id='+item.id"
						 v-for="(iiteim,key) in item.list" :key="key">{{iitem.name}}
						</navigator>
					</view>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
//#ifndef H5
var Vue = require('vue')
//#endif
//#ifdef H5
var Vue = require('vue').default
//#endif
	var app = Vue.prototype.getApp,
		api = Vue.prototype.getApp.api;

	export default {
		data() {
			return {
				data: {
					list: [{
						id: 1,
						name: "上衣"
					},
					{
						id: 2,
						name: "下装",
						list: [{
							id: 3,
							name: "长裤"
						}, {
							id: 4,
							name: "长裤"
						}, {
							id: 5,
							name: "九分裤"
						}, {
							id: 6,
							name: "短裤"
						}]
					}, {
						id: 7,
						name: "帽子"
					}]
				}
			}
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
			var a = this;
			a.setData({
				store_id: t.store_id,
				cat_id: t.cat_id || ""
			});
			var e = "shop_cat_list_store_id_" + a.data.store_id,
				i = a.getApp.core.getStorageSync(e);
			i && a.setData({
					list: i
				}), a.getApp.core.showNavigationBarLoading(),
				a.getApp.request({
					url: a.getApp.api.store.shop_cat,
					data: {
						store_id: a.data.store_id
					},
					success: function(t) {
						0 == t.code && (a.setData({
							list: t.data.list
						}), a.getApp.core.setStorageSync(e, t.data.list));
					},
					complete: function() {
						a.getApp.core.hideNavigationBarLoading();
					}
				});
		},
		onReady: function() {
			myVue.getApp.page.onReady(this);
		},
		onShow: function() {
			myVue.getApp.page.onShow(this);
		},
		onHide: function() {
			myVue.getApp.page.onHide(this);
		},
		onUnload: function() {
			myVue.getApp.page.onUnload(this);
		},
		onPullDownRefresh: function() {},
		onReachBottom: function() {}
	}
</script>

<style scoped>
	.cat-item {
		height: 100upx;
		line-height: 100upx;
		padding: 0 24upx;
		background: #fff;
		position: relative;
	}

	.cat-item::after {
		content: " ";
		display: block;
		position: absolute;
		bottom: 0;
		left: 24upx;
		right: 0;
		height: 0;
		border-bottom: 1upx solid #e3e3e3;
	}

	.cat-item .pointer {
		width: 12upx;
		height: 22upx;
	}

	.sub-cat-list {
		background: #fff;
		overflow: hidden;
		margin: -3upx -3upx;
	}

	.sub-cat-item {
		background: #eee;
		width: 376upx;
		display: inline-block;
		float: left;
		margin: 3upx;
		height: 100upx;
		line-height: 100upx;
		padding: 0 24upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cat-item.active,
	.sub-cat-item.active {
		color: #ff4544;
	}
</style>
